<template>
  <div>
    name: {{ name }} age: {{ age }} address: {{ address }} sex: {{ sex }}
  </div>
  <button @click="updateName">修改 name</button>
  <button @click="updateAge">修改 age</button>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  setup() {
    const person = reactive({
      name: '张三',
      age: 18,
      address: '河南',
      sex: '男',
    })
    /* const name = toRef(person, 'name')
    const age = toRef(person, 'age')
    const address = toRef(person, 'address')
    const sex = toRef(person, 'sex') */
    const { name, age, address, sex } = toRefs(person)
    const updateName = () => {
      name.value = '李四'
    }
    const updateAge = () => {
      age.value = 20
    }
    return {
      name,
      age,
      address,
      sex,
      updateName,
      updateAge,
    }
  },
}
</script>
